<template>
	<div class="deal-list">
		<list-title :data="header"></list-title>
		<div class="search">
			<el-form :inline="true" :model="searchForm" class="demo-form-inline">
				<el-form-item label="交易类型">
					<el-select v-model="searchForm.way" placeholder="请选择交易类型">
						<el-option label="所有" value="0"></el-option>
						<el-option label="支出" value="1"></el-option>
						<el-option label="充值" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="交易时间">
					<el-date-picker
					v-model="searchForm.addTime"
					type="daterange"
					format="yyyy-MM-dd"
					value-format="yyyy-MM-dd"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" size="mini" @click="searchSubmit">查询</el-button>
				</el-form-item>
			</el-form>
		</div>
		<list-table :list="dealList" :tableLoading="tableLoading" :footer="true" :pagination="pagination">
			<template v-slot:data>
				<el-table-column prop="membername" label="用戶名" ></el-table-column>
				<el-table-column prop="orderid" label="单号" ></el-table-column>
				<el-table-column prop="money" label="交易金额" ></el-table-column>
				<el-table-column prop="balance" label="余额" ></el-table-column>
				<el-table-column prop="pay_status" label="支付状态" ></el-table-column>
				<el-table-column prop="flag" label="交易类型" ></el-table-column>
				<el-table-column prop="way" label="交易方式" ></el-table-column>
				<!-- <el-table-column prop="remark" label="备注" ></el-table-column> -->
				<el-table-column prop="callback_time" label="微信通知时间"></el-table-column>
				<el-table-column prop="add_time" label="交易时间"></el-table-column>
			</template>
		</list-table>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import ListTable from "pc/common/ListTable"
import {changeToBool, filterEmpty, judgeAuth} from "static/js/common.js"
import {mapGetters} from 'vuex'

export default {
	inject: ['reload'],
	data() {
		return {
			/*头部数据*/
			header: {
				title: '交易流水',
				reload: true
			},
			auth: {
				list: true,//列表
			},
			/*搜索*/
			searchForm: {
				way: this.$route.query.way,
				addTime: (this.$route.query.begin_time!=undefined)?[this.$route.query.begin_time, this.$route.query.end_time]:'',
			},
			dealList: [],
			tableLoading: true,
			pagination: {
				count: 0,
				currPage: 1,
				pageSize: 3
			},
			rules: {
				data: {
					
				}
			}
		};
	},
	components: {
		ListTitle,
		ListTable
	},
	created: function() {

		/*获取所有企业数据*/
		this.getDealList()

		/*取出参数*/
		/*注释原因：内容列表里 已经返回了URL参数了，不需要再次获取*/
		// this.getConfig()

		/*获取当前选择的语言*/

		/*权限判断显示*/
		// this.header.buttons[0].auth = (judgeAuth('addContent', this.allMenuList) == undefined)?false:true
		// this.auth.audit = (judgeAuth('auditContent', this.allMenuList) == undefined)?false:true
		// this.auth.editor = (judgeAuth('modifyGoods', this.allMenuList) == undefined)?false:true
		// this.auth.delete = (judgeAuth('deleteGoods', this.allMenuList) == undefined)?false:true
		// this.$refs.qrCodeUrl3
		
	},
	watch: {
		/*监听路由变化，根据参数查询数据*/
		'$route' (to){
			this.tableLoading = true
			this.getDealList()
		}
	},
	methods: {
		/*获取内容列表*/
		getDealList: function(){
			if(this.$api.dealList != undefined){
				this.$get(this.$api.dealList, this.$route.query).then(res => {
					// console.log(res);
					if(res.data.code === 0){
						this.dealList = []
						if(res.data.data.list != undefined && res.data.data.list.length > 0){
							// console.log(res.data.data.list, 111);
							Object.keys(res.data.data.list).forEach((k) => {
								let flagName = "余额支付";
								if(res.data.data.list[k].flag == 2) {
									flagName = "现金支付";
								} else if(res.data.data.list[k].flag == 3) {
									flagName = "微信小程序";
								} else if(res.data.data.list[k].flag == 4) {
									flagName = "支付宝";
								}
								this.dealList.push (
									{
										id: res.data.data.list[k].deal_id,
										orderid: res.data.data.list[k].orderid,
										membername: res.data.data.list[k].membername,
										money: ((res.data.data.list[k].way == "1") ? "-" : "+") + res.data.data.list[k].money,
										balance: res.data.data.list[k].balance,
										pay_status: (res.data.data.list[k].pay_status == 1) ? "未支付" : "已支付",
										flag: flagName,
										way: (res.data.data.list[k].way == 1) ? "支出" : "充值",
										remark: res.data.data.list[k].remark,
										callback_time: res.data.data.list[k].callback_time,
										add_time: res.data.data.list[k].add_time,
									}
								);
							})
							this.pagination = res.data.data.pageInfo
						}
					}
				})
				.catch(err => {})
				.finally(() => {
					this.tableLoading = false
				}) 
			}else{
				this.$message({
					showClose: true,
					message: '没有交易列表的权限',
					type: 'error'
				});
			}
		},
		/*搜索提交*/
		searchSubmit: function(){
			let query = filterEmpty(JSON.parse(JSON.stringify(this.searchForm)))
			// console.log(query);
			if(query.addTime != undefined){
				query = Object.assign({begin_time: query['addTime'][0], end_time: query['addTime'][1]}, query)
				delete query['addTime']
			}
			this.$router.push({query})
		}
	},
	computed: {
		...mapGetters([
			'allMenuList'
		])
	}
};
</script>

<style lang="stylus" scoped>
.deal-list
	.warning
		color: #8a6d3b
		background-color: #fcf8e3
		border: 1px solid #faebcc
		margin-top: 10px
		padding: 10px
		font-size: 12px
		line-height: 20px
	.search
		margin-top: 10px
		.el-form-item--small.el-form-item
			margin-bottom: 0px
</style>